/**
 * 文档作者: wj
 * 创建时间：2018年04月05日
 * 修改时间：2018年04月05日
 * 描述信息：tabbar组件(底部导航栏)
 */

import React, {Component} from 'react';
import {
    Link
} from 'react-router-dom'

import './tabbar.scss';
import data from './tabbar.model';

class Tabbar extends Component {
    constructor(props) {
        super(props);
        const hash = window.location.hash.replace('#/', '');
        if (hash) {
            data.data.forEach((value, index) => {
                if (value.name === hash) {
                    this.click.call({index: index});
                }
            })
        }
    }
    click() {
        data.index = this.index;
    }
    
    render() {
        const isShow = ['', 'home', 'me', 'cart', 'sort']
        .indexOf(window.location.hash.replace('#/', '')) !== -1 && window.location.hash.indexOf('app=1') === -1;
        const el = data.data.map((value, index) => {
            return (
                <Link className='top-center' to={'/' + value.name}
                    key={value.name}
                    onClick={this.click.bind({index: index})}>
                    <i className={data.index === value.index?'icon ' + value.selectedIcon:'icon ' + value.icon}></i>
                    <p className={data.index === value.index ? 'seleced' : ''} >{value.text}</p>
                </Link>
            )
        });
        return (
            <ul className='tabbar' style={{display: isShow ? 'block' : 'none'}}>
                {el}
            </ul>
        )
    }
}

export default Tabbar;